<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show all Users</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script>

    Ext.onReady(function () {
        var itemsPerPage = 5;   // 设置你想要的每页显示条数

        var store = Ext.create('Ext.data.Store', {
            autoLoad: false,
            fields:['username', 'password', 'email'],
            pageSize: itemsPerPage, // 每页显示条数
            proxy: {
                type: 'ajax',
                url: 'http://localhost:8080/user/list.do',  // 请求URL加载数据
                actionMethods:{create: "POST", read: "POST", update: "POST", destroy: "POST"},
                reader: {
                    type: 'json',
                    root: 'data.list',
                    totalProperty: 'data.total'
                }
            },
        });

//         指定部分数据通过params参数来加载
        store.load({
            params:{
//                pageNum:1,
//                pageSize: itemsPerPage
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [
                { header: 'Username',  dataIndex: 'username' },
                { header: 'Password', dataIndex: 'password', flex: 1 },
                { header: 'Email', dataIndex: 'email' }
            ],
            width: 400,
            height: 300,
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: store,   // GridPanel中使用的数据
                dock: 'bottom',
                displayInfo: true
            }],
            renderTo: Ext.getBody()
        });
    })

</script>
</body>
</html>